<template>
  <div id="cesiumContainer" :style="{ height, width }"></div>
</template>

<script setup>
import { app } from "/src/main";
import "cesium/Build/Cesium/Widgets/widgets.css";
import modifyMap from "../tools/filterColor";
import { onMounted, inject } from "vue";
import * as Cesium from "cesium";
import { initEntities } from "/src/tools/initEntities";

Cesium.Ion.defaultAccessToken =
  "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIwM2IzNzIxZC00MDdiLTRjNDctOTVkYi0zNjQwNWI2NjVkMmEiLCJpZCI6MTY4OTkzLCJpYXQiOjE2OTU4NjQxOTV9.P4tye7zbsPDGHk2Qhtf5WVTxfYfxT6y1-AvXjm42dC4";
// console.log(Cesium)
const $props = defineProps({
  width: {
    type: String,
    default: "100vw",
  },
  height: {
    type: String,
    default: "100vh",
  },
});
// console.log($props)
const layer = new Cesium.UrlTemplateImageryProvider({
  url: "http://webrd02.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}",
  minimumLevel: 4,
  maximumLevel: 18,
});
const $datas = inject("$datas");
let viewer = null;
onMounted(() => {
  viewer = new Cesium.Viewer("cesiumContainer", {
    imageryProvider: layer,
    timeline: false, // 隐藏时间轴控件
    animation: false, // 隐藏动画控件【包括左下角有一个小小的钟，也是动画控件里的】
    baseLayerPicker: false, // 隐藏右上角图层选择控件
    geocoder: false, // 隐藏搜索按钮控件
    homeButton: false, // 隐藏主页按钮控件
    sceneModePicker: false, // 隐藏投影方式控件
    navigationHelpButton: false, // 隐藏帮助按钮
    fullscreenButton: false, // 隐藏右下角全屏控件
    infoBox: false, // 用于显示信息的小部件
    selectionIndicator: false, // 用于在所选对象上显示指示器的小部件
    shouldAnimate: false, //开启场景动画
  });
  app.provide("$viewer", viewer);
  // 设置沙箱的权限,解决infobox的沙盒报错
  // setSandbox();
  modifyMap(viewer, {
    // 反色？
    invertColor: true,
    // 滤镜值
    filterRGB: [70, 110, 120],
  });
  const { positions } = initEntities(viewer, $datas);
  app.provide("$positions", positions);
});

function setSandbox() {
  var iframe = document.getElementsByClassName("cesium-infoBox-iframe")[0];
  // console.log(iframe)
  iframe.setAttribute(
    "sandbox",
    "allow-same-origin allow-scripts allow-popups allow-forms"
  );
  iframe.setAttribute("src", ""); //必须设置src为空 否则不会生效。
}
</script>

<style lang="scss" scoped></style>
